<template>
	<cl-crud @load="onLoad">
		<template #table-column-app="{scope}">
			{{ filterplatForm(scope.row.app) }}
		</template>
	</cl-crud>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			options: {
				app: [],
				options: []
			}
		};
	},
	computed: {
		...mapGetters(['platformList']),
		filterplatForm() {
			return function(val) {
				if (val) {
					let arr = val.split(',');
					let list = [];
					arr.map(i => {
						let xxx =
							this.platformList.length == 0
								? i
								: this.platformList.filter(v => v.value == i)[0]
								? this.platformList.filter(v => v.value == i)[0].label
								: '无';
						list.push(xxx);
					});
					return list.join();
				} else {
					return '无';
				}
				// return '无';
			};
		}
	},
	created() {
		// this.$service.platform.app.page().then(res => {
		// 	this.options.app = res.list.map(e => {
		// 		return {
		// 			label: e.name,
		// 			value: e.key
		// 		};
		// 	});
		// });
	},

	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.system.role)
				.set('table', {
					columns: [
						{
							type: 'selection',
							align: 'center',
							width: '60'
						},
						{
							prop: 'name',
							label: '名称',
							align: 'center'
						},
						{
							prop: 'label',
							label: '标识',
							align: 'center'
						},
						{
							prop: 'app',
							label: '平台',
							align: 'center'
						},
						{
							prop: 'remark',
							label: '备注',
							align: 'center'
						},
						{
							prop: 'createTime',
							label: '创建时间',
							align: 'center',
							sortable: true
						},
						{
							prop: 'updateTime',
							label: '更新时间',
							align: 'center',
							sortable: true
						}
					],

					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					}
				})
				.set('upsert', {
					props: {
						width: '800px'
					},
					items: [
						{
							prop: 'name',
							label: '名称',
							span: 12,
							component: {
								name: 'el-input'
							},
							rules: {
								required: true,
								message: '名称不能为空'
							}
						},
						{
							prop: 'label',
							label: '标识',
							span: 12,
							component: {
								name: 'el-input',
								props: {
									placeholder: '请填写标识'
								}
							},
							rules: {
								required: true,
								message: '标识不能为空'
							}
						},
						{
							prop: 'remark',
							label: '备注',
							span: 24,
							component: {
								name: 'el-input',
								props: {
									type: 'textarea',
									rows: 4
								}
							}
						},
						{
							label: '数据平台',
							prop: 'app',
							value: [],
							component: {
								name: 'el-select',
								props: {
									placeholder: '请选择平台',
									filterable: true,
									'default-first-option': true,
									clearable: true,
									multiple: true
								},
								options: []
							},
							rules: {
								required: true,
								message: '数据平台'
							}
						},
						{
							prop: 'menuIdList',
							span: 12,
							value: [],
							component: {
								name: 'cl-role-tree',
								props: {
									title: '功能权限'
								}
							}
						},
						{
							prop: 'departmentIdList',
							value: [],
							span: 11,
							offset: 1,
							props: {
								'label-width': '0px'
							},
							component: {
								name: 'cl-dept-tree',
								props: {
									title: '数据权限'
								}
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'multi-delete-btn', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', (isEdit, data) => {
					console.log(this.$store.state);
					app.setData(
						'upsert.items[prop:app].component.options',
						this.$store.state.topFilter.platList
					);
					// this.crud.setData(
					// 	'upsert.items[prop:app].component.options',
					// 	this.$store.state.topFilter.platList
					// );
					if (isEdit) {
						data.app = data.app.split(',').filter(Boolean);
					}
				})
				.on('submit', (isEdit, data, { next }) => {
					next({
						...data,
						app: data.app.join(',')
					});
				})
				.done();

			app.refresh();
		}
	}
};
</script>
